この記事では、Zustand のソース コードで Object.assign() がどのように使用されているかを理解します。

上記のコード スニペットは vanilla.ts からのものです。状態を設定すると、Object.assign が状態オブジェクトの更新に使用されます。

まず Object.assign:

Object.assign()

Object.assign() 静的メソッドは、列挙可能なすべての独自のプロパティを 1 つ以上の ソース オブジェクトから ターゲット オブジェクトにコピーします。変更されたターゲット オブジェクトを返します。

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// Expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget === target);
// Expected output: true

ターゲット オブジェクトの b 値は、ソース オブジェクトの b 値に置き換えられます。

すごくシンプルですよね？ここで、いくつかの実験を実行して、Zustand の setState が Object.assign() メソッドをどのように利用するかを理解しましょう。

Zustand のソースコード内の Object.assign():

// pulled from: https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L76
state = (replace != null ? 
              replace : 
              typeof nextState !== "object" || 
              nextState === null) ? 
                nextState : 
                Object.assign({}, state, nextState);

これは、上記のコード スニペットにあるネストされた三項演算子です。 replace が null でない場合は、state が replace になります。 nextState がオブジェクトではない場合は、nextState をそのまま返しますが、ここで興味があるのは Object.assign({}, state, newState).

まずログを記録して、状態を更新するときの状態と次の状態を確認しましょう。私が選んだ例は、Zustand のソース コードのデモ例からのものです。いくつかのコンソール ステートメントを追加して実験を実行できるように、コードを少し変更しました。

この単純な例では、カウントが増加すると、Object.assign.

次回、JSON オブジェクトに対して更新を実行しようとすると、Object.assign.

私たちについて：

Think Throo では、オープンソース プロジェクトからインスピレーションを得たベスト プラクティスを教えるという使命を担っています。

Next.js/React の高度なアーキテクチャ概念を実践してコーディング スキルを 10 倍にし、ベスト プラクティスを学び、本番レベルのプロジェクトを構築します。

私たちはオープンソースです — https://github.com/thinkthroo/thinkthroo (スターを付けてください!)

あなたのビジネスに合わせたオーダーメイドの Web システムを構築したいとお考えですか? [email protected]

著者について:

やあ、ラムです。私は情熱的なソフトウェア エンジニア/OSS Tinkerer です。

私のウェブサイトをチェックしてください: https://www.ramunarasinga.com/

参考文献:

1. https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L76

2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign